<template>
	<view class="img-Box">
		<image :src="imageUrl + porps.Img" mode="aspectFill"></image>
		<view class="map-but" @click="toTxMap">
			<text>地图</text>
		</view>
	</view>
</template>

<script setup>
	import {defineProps,watchEffect} from 'vue';
	import {imageUrl} from '@/config/request/request.js'
	const porps = defineProps({
		Img: {
			type: String,
			default: ''
		},
	})
	const emit = defineEmits(['toTxMap']);
	watchEffect(() => {
		console.log('父组件传递的porps.Img:', porps.Img);
	});
	const toTxMap = () =>{
		emit('toTxMap')
		
	}
</script>

<style lang="scss" scoped>
	.img-Box{
		width: 100%;
		height: 540rpx;
		background-color: #e6e1df;
		position: relative;
		image{
			width: 100%;
			height: 100%;
		}
		.map-but{
			width: 140rpx;
			height: 68rpx;
			border-radius: 70rpx;
			position: absolute;
			background-color: rgba(255, 255, 255, .5);
			bottom: 30rpx;
			right: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			text{
				color: #fff;
				font-size: 24rpx;
				font-weight: 400;
			}
		}
	} 
</style>